<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体特征</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: #888888 1px solid;
            margin: 0 auto;
            line-height: 500px;
            text-align: center;
            font-size: 50px;
            font-weight: bolder;
            background-color: green;
            opacity: 0.2;
        }

        @media print {
            .box {
                font-size: 100px;
                background-color: red;
                orientation: portrait;
            }
        }

    </style>
</head>
<body>


<!--
    媒体查询:
        1.媒体类型:
            all : 检测所有设备
            print : 检测打印设备
            screen : 检测显示设备
        语法:
            @media 媒体类型{
                选择器 {
                    属性名称:属性值;
                }
            }
        常用的媒体特征:
            width: 检测视口宽度
            max-width:检测视口最大宽度。
            min-width:检测视口最小宽度。
            height:检测视口高度
            max-height:检测视口最大高度。
            min-height:检测视口最小高度。
            device-width
            max-device-width:检测设备屏幕的最大宽度
            min-device-width:检测设备屏幕的最小宽度。
            orientation: 检测视口的旋转方向(是否横屏)。
                    1.portrait:视口处于纵向，即高度大于等于宽度。
                    2.landscape:视口处于横向，即宽度大于高度。

        运算符：
            1.and:并且
            2.","或 or:或
            3.not: 否定
            4.only: 肯定

        常用阈值
            在实际开发过程中，会将屏幕划分成几个区域
                超小屏幕: 小于768px
                小屏幕: 768-992px
                中等屏幕: 992-1200px
                大屏幕: 1200-1920px
                超大屏幕: 大于1920px
        结合外部样式的用法:
            用法一:
            <link rel."stylesheet” med1a,"具你的媒休査询”href,"mystylesheet.css >
            用法二:
              @media screen and(max-width:768px) {
                    /*CSS-Code;*/
              }
              @media screen and(min-width:768px)and(max-width:1280px){
                    /*CSS-Code;*/
              }
-->
    <div class="box">
        过年好！
    </div>
</body>
</html>